<template>
    <section class="riskControlStatistics-process-statistics common-block-section">
        <article v-for="item in bizStatusList" :key="item.status" class="item-right">
            <header>
                {{ item.title }}
            </header>
            <el-progress
                type="circle"
                :width="100"
                :stroke-width="4"
                :percentage="item.persent">
            </el-progress>
            <section>
                {{ item.amount}}
            </section>
            <div style="margin-top: 24px">
                {{ item.describe }}
            </div>
        </article>
    </section>
</template>

<script>
export default {
    data() {
        return {
            total: 20,
            res:{data:{
                total:9900,
                bizStatusList:[{
                    title:"",
                    status:1,
                    amount:1322,
                    present:0,
                    describe:"税负率过低/毛利率偏低"
                },{
                    title:"",
                    status:2,
                    amount:1230,
                    present:0,
                    describe:"税负率过高/毛利率偏高"

                },{
                    title:"",
                    status:3,
                    amount:1252,
                    present:0,
                    describe:"税负率无风险"
                }]}},
            bizStatusList: [],
            colors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
            ]
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {

        /**
         * 加载数据
         */
        loadData() {
                this.total = this.res.data.total;
                const bizStatusMap = [
                    '成本项风险',
                    '费用项风险',
                    '低风险'
                ];
                this.res.data.bizStatusList.forEach(item => {
                    item.title = bizStatusMap[item.status - 1];
                    item.persent = Number.parseInt((item.amount / this.total) * 100);
                });
                this.bizStatusList = this.res.data.bizStatusList;
        },

        getColor(value) {
            let color;
            if (value < 33) {
                color = '#e6a23c';
            }
            else if (value < 66) {
                color = '#1989fa';
            }
            else {
                color = '#5cb87a';
            }
            return color;
        }
    }
}
</script>

<style lang="less">
@import '../../../assets/var.less';
.riskControlStatistics-process-statistics {
    display: flex;
    > header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        text-align: center;
        > div {
            font-size: 18px;
            img {
                width: 50px;
            }
            .text {
                vertical-align: 19px;
            }
        }
        > span {
            color: @color-grey-low;
            font-size: 16px;
        }

    }
    > article {
        flex: 1;
        text-align: center;
        > header {
            padding-bottom: 5px;
            color: @color-grey;
        }
        > section {
            font-size: 18px;
        }
        > footer {
            > div {
                display: inline-block;
                vertical-align: middle;
            }
            img {
                width: 40px;
            }
            .percent {
                margin-right: -30px;
                font-size: 12px;
                color: @color-grey-low;
                vertical-align: 21px;
            }
        }
    }
    .item-left {
        > section {
            margin-top: -15px;
        }
    }
    .item-right {
        .el-progress__text {
            margin-top: -12px;
        }
        > section {
            margin-top: -57px;
        }
    }
    .item-left + .item-right {
        border-left: 1px solid @color-grey-lower;
    }
}
</style>